<script setup>
/* 
  添加功能
  1. 绑定 v-model
  2. 绑定 @keydown.enter 事件
  3. 父子通讯添加数据
    a. id 使用 +new Date() 时间戳即可
    b. 使用 unshift 方法添加到第一项
    c. 子组件判断 value 值，有内容才添加,添加完后变为 ''
*/
import { ref } from 'vue';

const name = ref('');

const emit = defineEmits(['add']);
const add = () => {
  // console.log('回车事件 -----> ');
  if (name.value) {
    emit('add', name.value);
    name.value = '';
  } else {
    alert('不能为空');
  }
};
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model="name"
      @keydown.enter="add"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>

<style lang="less" scoped></style>
